<template>
  <view class="home">
    <customer-bar />
    <scroll-view
      scroll-y
      :style="{ height: scrollHeight + 'px' }"
    >
      <image
        src="/pages/activity/static/mosushop/ad_1.png"
        class="w-full"
        mode="widthFix"
      />
      <image
        src="/pages/activity/static/mosushop/ad_2.png"
        class="w-full"
        mode="widthFix"
      />
      <home-item-list
        btn-type="circle"
        header-icon="/pages/activity/static/mosushop/syhydzzb.png"
        header-title="4亿会员定制周边"
        :items="homeList1"
      />
      <home-item-list
        btn-type="default"
        header-icon="/pages/activity/static/mosushop/ypyh.png"
        header-title="饮品优惠"
        :items="homeList2"
      />
      <home-item-list
        btn-type="default"
        header-icon="/pages/activity/static/mosushop/xwzb.png"
        header-title="雪王周边（支持现金+雪王币）"
        header-right-text="查看更多"
        :items="homeList3"
      />
      <home-item-list
        btn-type="circle"
        header-icon="/pages/activity/static/mosushop/dphj.png"
        header-title="大牌好券"
        header-right-text="查看更多"
        :items="homeList4"
      />
    </scroll-view>
  </view>
</template>
<script>
import { mapState } from "vuex"
import CustomerBar from "../CustomerBar/CustomerBar.vue"
import HomeItemList from "../HomItemList/HomeItemList.vue"
export default {
  name: "Home",
  components: {
    CustomerBar,
    HomeItemList
  },
  data() {
    return {
      scrollHeight: 0,
    }
  },
  created() {
    this.scrollHeight = uni.getSystemInfoSync().windowHeight - 44 - uni.upx2px(250)
  },
  computed: {
    ...mapState("mosushop", ["homeList1", "homeList2", "homeList3", "homeList4"])
  }
}
</script>
<style lang="scss" scoped>
.home {
  background-color: #fff;
}
</style>
